<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

String menuJsonStr = (String)request.getAttribute("menuJsonStr");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<base href="<%=basePath %>">
	<link rel="stylesheet" href="js/dijit/themes/claro/claro.css">
	<style type="text/css">
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}
.icon { display:-moz-inline-box; -moz-box-align:center; }
.icon { display:inline-block; width:18px; height:18px; background-image: url(img/menuIcon/menuIcon16x16.jpg); vertical-align:middle; }
.icon_01_01 { background-position: -16px -12px; }
.icon_01_02 { background-position: -48px -12px; }
.icon_01_03 { background-position: -80px -12px; }
.icon_01_04 { background-position: -112px -12px; }
.icon_01_05 { background-position: -144px -12px; }
.icon_01_06 { background-position: -176px -12px; }
.icon_01_07 { background-position: -208px -12px; }
.icon_01_08 { background-position: -240px -12px; }
.icon_01_09 { background-position: -272px -12px; }
.icon_01_10 { background-position: -304px -12px; }
.icon_01_11 { background-position: -336px -12px; }
.icon_01_12 { background-position: -367px -12px; }

.icon_02_01 { background-position: -16px -46px; }
.icon_02_02 { background-position: -48px -46px; }
.icon_02_03 { background-position: -80px -46px; }
.icon_02_04 { background-position: -112px -46px; }
.icon_02_05 { background-position: -144px -46px; }
.icon_02_06 { background-position: -176px -46px; }
.icon_02_07 { background-position: -208px -46px; }
.icon_02_08 { background-position: -240px -46px; }
.icon_02_09 { background-position: -272px -46px; }
.icon_02_10 { background-position: -304px -46px; }
.icon_02_11 { background-position: -336px -46px; }
.icon_02_12 { background-position: -367px -46px; }



</style>
<script>dojoConfig = {parseOnLoad:true,isDebug: true}</script>
<script src='js/dojo/dojo.js.uncompressed.js'></script>
<script>
		var menuJson = <%=menuJsonStr%>;
		require(["dojo/ready","dojo/store/Memory","dijit/Tree", "dijit/tree/ObjectStoreModel","dijit/layout/ContentPane",
		"dojo/dom","dijit/layout/TabContainer","dojo/parser", "dijit/layout/BorderContainer",
 		"dijit/layout/AccordionContainer", "dojox/layout/ContentPane", "dijit/layout/AccordionPane",
 		"dijit/registry"],
		function(ready,Memory,Tree,ObjectStoreModel,ContentPane,dom,TabContainer,parser,BorderContainer,
			AccordionContainer,ContentPane,AccordionPane,registry){
			var myStore = new Memory({
				data: menuJson,
				idProperty:"menuId",
				getChildren:function(object){
		            return this.query({parentId:object.menuId});
		        }
	        });
	        var myModel = new ObjectStoreModel({
	        	store: myStore,
	        	labelAttr:"menuName",
	        	query: {parentId:0},
	        	mayHaveChildren:function(item){
	        		return item.isLeaf==0;
	        	}
	        });
			ready(function(){
		        var tree = new Tree({
		            model: myModel,
		            showRoot : false
		        }).placeAt("leftDiv");
		        tree.startup();
		        tree.expandAll();
		        tree.on("click",function(item){
		        	if(item.isLeaf){
		        		var myCp = new ContentPane({
		        		  title : item.menuName ,
		        		  href:"<%=basePath%>"+item.actionUrl+".do",
					      style:"height:100%;width:100%",
					      preventCache:true,
					      preload:true,
					      loadingMessage : "加载中……",
					      closable:true,
					      iconClass:item.iconPic,
					      //icon icon_01_03
					      executeScripts:true
					    });
					    var tc = registry.byId("mainContainer");
					    tc.addChild(myCp);
					    tc.selectChild(myCp);
		        	}
		        });
		    });
		});
	</script>
</head>
<body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;">
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" >Top pane</div>
     <div id="leftDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left',splitter: true" style="width:200px;">
     	
     </div>
     <div id="mainContainer" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'" >
          <div data-dojo-type="dijit/layout/ContentPane" title="tab #1">tab pane #1</div>
          <div data-dojo-type="dijit/layout/ContentPane" title="tab #2">tab pane #2</div>
          <div id="mainContainer1" data-dojo-type="dijit/layout/ContentPane" title="tab #3">tab pane #3</div>
     </div>
     <!-- 
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div>
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div>
      -->
</div>
</body>
</html>
